<template>
    <div class="horizontal-timeline-container">
      <div class="timeline">
        <!-- 遍历时间轴步骤 -->
        <div v-for="(item, index) in items" :key="index" class="timeline-item">
          <!-- 时间点 -->
          <div class="timeline-dot"></div>
  
          <!-- 时间描述 -->
          <div class="timeline-content">
            <div class="timeline-title">{{ item.title }}</div>
            <div class="timeline-description">{{ item.description }}</div>
          </div>
  
          <!-- 连接线 (只在中间的时间点之间显示) -->
          <div v-if="index < items.length - 1" class="timeline-line"></div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: "HorizontalTimeline",
    data() {
      return {
        // 时间轴步骤数据
        items: [
          {
            title: "步骤 1",
            description: "这是步骤 1 的描述"
          },
          {
            title: "步骤 2",
            description: "这是步骤 2 的描述"
          },
          {
            title: "步骤 3",
            description: "这是步骤 3 的描述"
          },
          {
            title: "步骤 4",
            description: "这是步骤 4 的描述"
          }
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  .horizontal-timeline-container {
    display: flex;
    justify-content: center;
    padding: 20px;
  }
  
  .timeline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto; /* 如果时间轴过长，启用滚动条 */
  }
  
  .timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 50px; /* 时间节点之间的间距 */
    position: relative;
  }
  
  .timeline-dot {
    width: 20px;
    height: 20px;
    background-color: #409EFF; /* 时间点的颜色 */
    border-radius: 50%;
    border: 3px solid #fff; /* 时间点边框 */
    position: absolute;
    top: 0;
  }
  
  .timeline-content {
    margin-top: 10px; /* 时间内容与时间点之间的间距 */
    text-align: center;
  }
  
  .timeline-title {
    font-size: 14px;
    font-weight: bold;
    color: white;
  }
  
  .timeline-description {
    font-size: 12px;
    color: white;
  }
  
  .timeline-line {
    width: 50px; /* 连接线的长度 */
    height: 2px;
    background-color: #409EFF; /* 连接线的颜色 */
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateY(-50%);
  }
  </style>
  